<template>
  <el-upload
    drag
    multiple
    :auto-upload="false"
    :on-change="handleChange"
    accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
  >
    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
    <div class="el-upload__text">拖拽或者 <em>点击上传</em></div>
    <template #tip>
      <div class="el-upload__tip">请上传需要导入的Excel文件</div>
    </template>
  </el-upload>
  <el-dialog v-model="showConfirmDialog">
    <InfoConfirm v-model="excelData"/>
    <template #footer>
        <el-button @click="handleCancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { UploadFile, UploadFiles } from "element-plus";
import SupplierInfoBaseApi from '/@/api/webPath/SupplierInfoBaseApi'


interface Props {
  doUpload: (data: any) => Promise<any>;
}

const props = defineProps<Props>();
const emit = defineEmits(["callback"]);
const showConfirmDialog = ref(false)
const excelData = ref({
    mainTitle:'供应商基本信息库',
    subTitle:[
        {
            subtitle:"营业执照信息",
            fields:{
                name:"企业名称*",
                address:"企业地址",
                uniqueId:"统一社会信用代码*",
                releaseDate:"发证日期"
            },
        },
        {
            subtitle:"经营许可证信息",
            fields:{
                businiessLicenseId:"许可证编号",
                applyReleaseDate:"发证日期",
                avaliableDate:"有效日期",
                bussinessDomain:"经营项目"
            }
        },
        {
            subtitle:"生产许可证信息",
            fields:
            {
                produceLicenseId:"许可证编号",
                produceLicneseReleaseDate:"发证日期",
                produceLicenseAvaliableDate:"有效日期",
                produceLicenseBussinessDomain:"经营项目",
                produceCategory:"产品类别",
                categoryId:"类别编号",
                categoryName:"类别名称",
                categoryDetail:"品种明细",
            }
        }
    ],
    records:[
        {
            name:'中粮东海粮油工业（张家港）有限公司',
            address:"测试地址",
            uniqueId:"913205926082583175",
            releaseDate:"2019/12/9",
            businiessLicenseId:"SC10132058200031",
            applyReleaseDate:"",
            avaliableDate:"",
            bussinessDomain:"",
            produceLicenseId:"",
            produceLicneseReleaseDate:"",
            produceLicenseAvaliableDate:"",
            produceLicenseBussinessDomain:"",
            produceCategory:"",
            categoryId:"",
            categoryName:"",
            categoryDetail:""
        }
    ]
})


function handleChange(file: UploadFile, files: UploadFiles) {
  console.log("files:", file, files);
  const form = new FormData();
  if (file.raw) {
    const loading = $baseLoading("上传中，请耐心等待");
    try {
      form.append("file", file.raw);
      props.doUpload(form).then((data) => {
        console.log("data:", data);
        console.log("data JSON:",data.data)
        excelData.value = JSON.parse(data.data)
        loading.close();
        file.status = 'success'
        showConfirmDialog.value = true
      });
    } catch {
      loading.close();
    }
  }
}

/**
 * 信息确认弹窗点击取消
 */
function handleCancel(){
  showConfirmDialog.value = false
}
/**
 * 信息确认后处理
 */
async function handleConfirm(){
  try{

    const res = await SupplierInfoBaseApi.batchSave({
      supplierInfoBase:JSON.stringify(excelData.value.records)
    })
    console.log("返回结果",res)
    $baseMessage("保存成功","success")

  }catch(e){
    console.log("保存错误：",e);

    $baseMessage("保存失败","error")
  }
 
}
</script>

<style scoped></style>
